<template>
  <div
    :class="[
      'eva-stripe-border',
      borderSize == 1 ? 'eva-stripe-border-min' : 'eva-stripe-border-others',
    ]"
    ref="evaStripe"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:svg="http://www.w3.org/2000/svg"
      :style="{ height: `${btnBorderSettings.borderHeight}px`, width: '100%' }"
    >
      <g class="layer">
        <line
          fill="none"
          v-for="i in borderRange"
          :key="i"
          :id="`svg_${i}`"
          :stroke="btnBorderSettings.borderColor"
          :stroke-width="btnBorderSettings.lineWeight"
          :x1="i * btnBorderSettings.lineSpace - 0.5 * btnBorderSettings.borderHeight - offset"
          :x2="i * btnBorderSettings.lineSpace + btnBorderSettings.lineGradient - offset"
          :y1="btnBorderYAxis.y1"
          :y2="btnBorderYAxis.y2"
        />
      </g>
    </svg>
  </div>
</template>
<script>
export default {
  name: 'EVAStripe',
  props: {
    //条纹尺码，默认1
    borderSize: {
      type: Number,
      default: 2,
    },
    //高度缩放比，默认10
    heightRatio: {
      type: Number,
      default: 10,
    },
    isHover: {
      type: Boolean,
      default: false,
    },
    //动画时长级别，1~N
    animationLevel: {
      type: Number,
      default: 1,
    },
  },
  data: () => ({
    btnWidth: 50,
    offset: 0,
    borderRange: [...new Array(20).keys()],
    requestId: 0,
    animationStartTime: 0,
    stoppedAt: 0,
  }),
  methods: {
    animate() {
      this.offset += 2;
      this.requestId = window.requestAnimationFrame(this.animate);
      if (this.offset > this.maxOffset) this.stop();
    },
    start() {
      if (this.requestId === 0) {
        this.stop();
        this.animationStartTime = window.performance.now();
        this.requestId = window.requestAnimationFrame(this.animate);
      }
    },
    stop() {
      if (this.requestId !== 0) {
        window.cancelAnimationFrame(this.requestId);
        this.stoppedAt = window.performance.now();
        this.offset = 0;
        this.borderRange = [
          ...new Array(
            Math.ceil(this.btnWidth / (0.5 * this.btnBorderSettings.borderHeight)) + 1,
          ).keys(),
        ];
        this.requestId = 0;
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.btnWidth = this.$refs.evaStripe.offsetWidth;
      this.borderRange = [
        ...new Array(
          Math.ceil(this.btnWidth / (0.5 * this.btnBorderSettings.borderHeight)) + 1,
        ).keys(),
      ];
    });
  },
  computed: {
    btnBorderSettings() {
      let height = this.heightRatio * this.borderSize;
      return {
        borderColor: 'red',
        lineWeight: 3 * this.borderSize,
        lineSpace: 5 * this.borderSize,
        lineGradient: 50 * this.borderSize,
        borderHeight: height,
      };
    },
    btnBorderYAxis() {
      const y1 = this.btnBorderSettings.borderHeight + 10;
      const y2 = -(this.btnBorderSettings.lineGradient + this.btnBorderSettings.borderHeight + y1);
      return { y1, y2 };
    },
    maxOffset() {
      return this.animationLevel * 50;
    },
  },
  watch: {
    isHover(newVal) {
      if (newVal) {
        this.borderRange = [...new Array(this.maxOffset + this.borderRange.length).keys()];
        this.start();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/* .eva-stripe-border-min {
  margin-top: -6px;
  margin-bottom: -6px;
}
.eva-stripe-border-others {
  margin-bottom: -8px;
} */
</style>